<template lang="html">
  <div class="">
    <!-- 自定义组件 -->
    <settingTitle title="会员中心" />
    <div class="top">
        <div class="leftpart">
          <div class="touxiang">
            <img src="../../assets/images/150.150.png" alt="">
          </div>
          <div class="member">
             <p class="span1">用户名称</p>
             <p class="span2">非会员</p>
          </div>
        </div>
        <div class="rightpart">
          <span>开通会员</span>
        </div>
    </div>
    <div class="memberSale">
      <div class="title">会员显示优惠</div>
      <div class="guanggao"></div>
    </div>
    <div class="formember">
      <div class="title">
        会员专享
      </div>
      <!-- 自定义组件 -->
      <OnlyMember />  
    </div>

  </div>

</template>

<script>
import SettingTitle from "../../components/settingTitle"
import OnlyMember from "../../components/onlyForMember"
export default {
  name:"membercenter",
  data(){
    return{}
  },
  components:{
    SettingTitle,
    OnlyMember
  }
}
</script>

<style scoped>
.top{
  width: 100%;
  height:2.1rem;
  display: flex;
}
.leftpart,.rightpart{
  background-color: #fff;
  flex-grow: 1;
  overflow: hidden;
}
.leftpart div{
  float: left;
}

.leftpart .touxiang{
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  margin:.36rem 0 .84rem .2rem;
}
.leftpart .touxiang img{
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
}
.leftpart .member{
  margin: .66rem 0 0 .16rem;
}
.leftpart .member .span1{
  margin-bottom: .26rem;
  color: #333;
}
.leftpart .member .span2{
  margin-left: .1rem;
  color: #333;
}
.rightpart{
  width: 1.5rem;
  height:2.1rem;
}
.rightpart span{
  display: inline-block;
  width: 1.5rem;
  height:.5rem;
  border: 1px solid #c995f5;
  color:  #c995f5;
  border-radius:.1rem;
  text-align: center;
  box-sizing: border-box;
  padding-top: .13rem;
  float: right;
  margin: .8rem .2rem 0 0;
}
.memberSale .title{
  color: #333;
  width: 100%;
  height: .45rem;
  background-color: #fff;
  box-sizing: border-box;
  padding-left: .2rem;
}
.memberSale .guanggao{
  width: 100%;
  height: 2.8rem;
  background: url("../../assets/images/36750.350.png");
  background-size: 100% 100%;
}
.formember .title{
    width: 100%;
    height: .45rem;
    background-color: #fff;
    color: #333;
    padding:.32rem 0 .27rem  .2rem;
}
</style>
